<template>
  <div id="index">
    <div class="row-top">
        <div id="myCarousel" class="carousel slide swiper-container" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>   
            <div class="carousel-inner">
                <div class="item active">
                    <img src="../../../static/images/all.png"  style="width: 100%" class="carousel-img">
                </div>
                <div class="item">
                    <img src="../../../static/images/introduce1.png"  style="width: 100%" class="carousel-img">
                </div>
                <div class="item">
                    <img src="../../../static/images/introduce2.png"  style="width: 100%" class="carousel-img">
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="produre">
                <p class="section-header text-center">线上服务</p>
                <div class="introduce-content">
                    <div class="col-md-6 animated animation56 fadeInLeft" style="overflow:hidden;">
                        <p class="introduce-info">
                            口袋表情包是南京最早一批上线的小程序，随时随地制作专属于自己的动态表情包成为可能，用户只需在小程序中搜索口袋表情包，选择自己喜欢的模式，进行拍摄，可以说口袋表情包是斗图必备的小程序，既不占用手机空间，又能让你在斗图时处于不败之地。
                        </p>
                        <div class="col-xs-12">
                            <router-link to="/shootTips" class="btn btn-default load animation512">拍摄攻略</router-link>
                        </div>
                    </div>
                    <div class="col-md-6 animated animation56 fadeInRight">
                        <img src="../../../static/images/small1.png" class="introduce-img" style="float: right;">
                    </div>
                </div>
            </div>
            <div class="introduce">
                <p class="section-header text-center">线下服务</p>
                <div class="introduce-content">
                    <div class="col-md-6 animation56">
                        <img src="../../../static/images/small2.png" class="introduce-img" />
                    </div>
                    <div class="col-md-6 animation56">
                        <p class="introduce-info">
                            口袋表情包线下拍摄时有绿幕可以去除背景，更有很多道具增加用户体验，用户自己选择想要拍摄的表情包模式，搭配着各种道具，如果脑洞不够大，可以照着模特的样子学，对着摄像头拍摄两秒视频后，系统自动生成表情包，然后就可以通过扫码将表情包下载到手机。
                        </p>
                        <div class="col-xs-12">
                            <router-link to="/storeAddr" class="btn btn-default load animation512">拍摄地址</router-link>
                        </div> 
                    </div>
                </div>
            </div>
            <div class="show">
                <p class="section-header text-center">案例演示</p>
                <div class="show-example">
                    <div class="bg">
                        <img src="../../../static/images/bg.png" alt="">
                        <div id="orderTotalCount" class="num num1">{{orderTotalCount}}</div>
                    </div>
                    <table width="100%" class="show-table">
                        <tbody>
                            <tr>
                                <td><a v-on:click="showGif('01')"></a></td>
                                <td><a v-on:click="showGif('02')"></a></td>
                                <td><a v-on:click="showGif('03')"></a></td>
                                <td><a v-on:click="showGif('04')"></a></td>
                                <td><a v-on:click="showGif('05')"></a></td>
                                <td><a v-on:click="showGif('05')"></a></td>
                            </tr>
                            <tr>
                                <td><a></a></td>
                                <td><a></a></td>
                                <td><a v-on:click="showGif('06')"></a></td>
                                <td><a></a></td>
                                <td><a v-on:click="showGif('05')"></a></td>
                                <td><a v-on:click="showGif('05')"></a></td>
                            </tr>
                            <tr>
                                <td><a></a></td>
                                <td><a></a></td>
                                <td><a v-on:click="showGif('07')"></a></td>
                                <td><a v-on:click="showGif('07')"></a></td>
                                <td><a></a></td>
                                <td><a v-on:click="showGif('08')"></a></td>
                            </tr>
                            <tr>
                                <td><a v-on:click="showGif('09')"></a></td>
                                <td><a></a></td>
                                <td><a v-on:click="showGif('07')"></a></td>
                                <td><a v-on:click="showGif('07')"></a></td>
                                <td><a v-on:click="showGif('10')"></a></td>
                                <td><a v-on:click="showGif('11')"></a></td>
                            </tr>
                            <tr>
                                <td><a v-on:click="showGif('12')"></a></td>
                                <td><a></a></td>
                                <td><a></a></td>
                                <td><a v-on:click="showGif('13')"></a></td>
                                <td><a v-on:click="showGif('14')"></a></td>
                                <td><a v-on:click="showGif('qrcode.jpg')"></a></td>
                            </tr>
                            <tr>
                                <td><a v-on:click="showGif('15')"></a></td>
                                <td><a></a></td>
                                <td><a></a></td>
                                <td><a v-on:click="showGif('16')"></a></td>
                                <td><a v-on:click="showGif('16')"></a></td>
                                <td><a v-on:click="showGif('17')"></a></td>
                            </tr>
                            <tr>
                                <td><a v-on:click="showGif('18')"></a></td>
                                <td><a v-on:click="showGif('18')"></a></td>
                                <td><a v-on:click="showGif('19')"></a></td>
                                <td><a v-on:click="showGif('16')"></a></td>
                                <td><a v-on:click="showGif('16')"></a></td>
                                <td><a v-on:click="showGif('20')"></a></td>
                            </tr>
                            <tr>
                                <td><a v-on:click="showGif('18')"></a></td>
                                <td><a v-on:click="showGif('18')"></a></td>
                                <td><a v-on:click="showGif('21')"></a></td>
                                <td><a v-on:click="showGif('22')"></a></td>
                                <td><a v-on:click="showGif('23')"></a></td>
                                <td><a v-on:click="showGif('24')"></a></td>
                            </tr>
                        </tbody>
                     </table>
                     <div class="mask" v-show="maskShow" v-on:click="hideGif"></div>
                     <div class="gif" v-show="gifShow" v-on:click="hideGif">
                        <img v-bind:src="gifUrl" alt="">
                     </div>

                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data: function () {
    return {
      maskShow: false,
      gifShow: false,
      gifUrl: '',
      orderTotalCount: 0
    }
  },
  methods: {
    showGif: function (name) {
      this.gifUrl = '../../../static/images/' + name + '.gif'
      this.maskShow = true
      this.gifShow = true
    },
    hideGif: function () {
      this.gifUrl = ''
      this.maskShow = false
      this.gifShow = false
    }
  },
  mounted: function () {
    let vm = this
    vm.$http.get('https://wx1.pokemoji.cn/api/user/dataAnalysis').then(function (data) {
      vm.orderTotalCount = data.data.onlineOrderTrueCount + data.data.offlineOrderTrueCount + data.data.onlineOrderFalseCount + data.data.offlineOrderFalseCount
    })
  }
}
</script>

<style>

</style>
